<template>
	<view class="content">
		<view class="nav">
			<uni-nav-bar fixed statusBar backgroundColor="#F5F7F8" left-icon="left" title="订单详情" @clickLeft="goback"/>
		</view>
		<view class="status box">
			<view class="title">
				{{orderInfo.status == 1?'未支付':orderInfo.status == 2?'待使用':orderInfo.status == 3?"服务中/已出票":orderInfo.status == 4?'已使用':orderInfo.status == 5?'待评价':orderInfo.status == 6?'已评价':orderInfo.status == 7?'已退款':orderInfo.status == 8?'已取消':''}}
			</view>
			<!-- <view class="time" v-if="orderInfo.status == 1">
				<view>{{orderInfo.closetime_text}}</view>
				<text>若未付款，订单将于{{content}}后自动关闭</text>
			</view> -->
			<view class="time" v-if="orderInfo.status == 1">
				<view>{{orderInfo.closetime_text}}</view>
				<view class="time-style">若未付款，订单将于<u-count-down
							separator-color="#CB2C25"
							color="#CB2C25"
							 :show-days="false"
							 :show-hours="false"
							 font-size="26"
							 ref="uCountDown" :timestamp="orderInfo.close_order_time" v-if="orderInfo.close_order_time > 0" @end="onTimeOver(index)"></u-count-down>后自动关闭</view>
			</view>
		</view>
		<view class="prudect box">
			<view class="hotel_name">{{orderInfo.productName}}</view>
			<view class="prudect_detail">
				<view class="shop">
					<image :src="orderInfo.images" mode="aspectFill"></image>
					<view class="detail">
						<view class="text">
							<text>使用日期</text>
							<view>
								<view>{{orderInfo.travelDate}}</view>
							</view>
						</view>
						<view class="text" v-if="orderInfo.drawAddress">
							<text>入园地址</text>
							<view>
								<view>{{orderInfo.drawAddress}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="price">
				{{orderInfo.status == 1 ? '待支付金额' : '支付金额'}}：<text>¥ {{orderInfo.price}}</text>
			</view>
		</view>
		
		<view class="editor box" v-if="orderInfo.useDescription">
			<view class="" v-for="(item,index) in orderInfo.useDescription" :key="index">
				<view class="title">{{item.name}}</view>
				<text> <rich-text :nodes="item.value"></rich-text></text>
			</view>
			
		</view>
		
		<view class="order_sn box">
			<view class="text">
				<text>订单编号</text>
				<view>{{orderInfo.order_sn}}</view>
			</view>
			<view class="text">
				<text>购买时间</text>
				<view>{{orderInfo.createtime}}</view>
			</view>
			<view class="text" style="margin-bottom: 0;">
				<text>手机号码</text>
				<view>{{orderInfo.mobile}}</view>
			</view>
		</view>
		<view class="swiper-content" v-if="orderInfo.voucherUrl && orderInfo.voucherUrl.length>0">
			<swiper	class="swiper-content" @change="changSwiper">
				<swiper-item v-for="(item,index) in orderInfo.voucherUrl" :key="index">
					<view v-if="orderInfo.status >= 2" :class="orderInfo.status >= 3?'code box errorCode':'code box'" >
						<view>扫码取票</view>
						<image :src="item"></image>
						<text>{{orderInfo.voucherCode[index]}}</text>
						<text>取票机扫码取票</text>
					</view>
				</swiper-item>
				
			</swiper>
			<view class="fixed-nums">
				<view>{{swiperIndex+1}}/{{orderInfo.voucherUrl.length}}</view>
			</view>
		</view>
		<view class="btn">
			<!-- 暂未付款 -->
			<view class="btn_box" v-if="orderInfo.status == 1">
				<view style="flex: 1;" class="btn_orange" @click="payment">立即支付 {{orderInfo.price}}元</view>
				<view class="btn_black" @click="show = true">取消订单</view>
			</view>
			<!-- 已付款待使用 -->
			<view class="btn_box" v-if="orderInfo.status == 2">
				<!-- <view class="btn_orange" @click="onCode">立即使用</view> -->
				<view class="btn_black" @click="show = true">退款</view>
			</view>
			<!-- 已使用 -->
			<view class="btn_box" v-if="orderInfo.status == 4 || orderInfo.status == 5">
				<view class="btn_yellow" @click="rebook">再次预定</view>
				<view class="btn_black" @click="evaluate">评价</view>
			</view>
			<view class="btn_box" v-if="orderInfo.status >=6">
				<view class="btn_yellow" @click="rebook">再次预定</view>
			</view>
		</view>
		<uni-popup ref="code">
			<view class="block">
				<view  :class="orderInfo.status >= 3?'code box errorCode':'code box'" style="margin: 0 auto;">
					<view>扫码取票</view>
					<image :src="qrcode"></image>
					<text>取票机扫码取票</text>
				</view>
				<uni-icons :size="30" type="clear" color="#BEBEBE" @click="closeCode"></uni-icons>
			</view>
		</uni-popup>
		<u-modal v-model="show" show-cancel-button	:content="'是否'+((orderInfo.status == 2|| orderInfo.status == 3)?'退款':'取消')+'该订单'"  mask-close-able	 @confirm="cancalOrder"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rate:4,
				order_id: 0,
				orderInfo: {},
				qrcode: '',
				content:0,
				show:false,
				swiperIndex:0
			}
		},
		onLoad(option) {
			this.order_id = option.order_id
			this.getOrderDetail()
			// this.getQrcode()
		},
		methods: {
			onTimeOver(e){
				this.orderInfo.status = 8
			},
			changSwiper(e){
				this.swiperIndex = e.detail.value
			},
			goback(){ uni.navigateBack() },
			onCode(){
				this.$refs.code.open('center')
			},
			closeCode(){
				this.$refs.code.close()
			},
			rebook(){
				uni.navigateTo({
					url:'/otherpages/travelStrategy/scenicSpotDetails?id='+this.orderInfo.scenicID
				})
			},
			evaluate(){
				uni.navigateTo({
					url: '/otherpages/order/operation?status=' +5+'&order_id='+ this.order_id+'&type=3'
				})
			},
			getOrderDetail() {
					var that = this
					this.request.httpTokenRequest({
						url: "order/getTicketOrderInfo",
						method: "post"
					}, {
						order_id: this.order_id
					}).then(function(data) {
						if (data.code == 0) {
							that.orderInfo = data.data
							// that.orderInfo.useDescription = JSON.parse(data.data.useDescription)
							if(that.orderInfo.status == 1){
								that.countdowm(data.data.closetime_text)
							}
						} else {}
					})
				},
				countdowm(timestamp) {
					let self = this;
					let timer = setInterval(function() {
						let nowTime = new Date();
						let endTime = new Date(timestamp);
						let t = endTime.getTime() - nowTime.getTime();
						if (t > 0) {
							let day = Math.floor(t / 86400000);
							let hour = Math.floor((t / 3600000) % 24);
							let min = Math.floor((t / 60000) % 60);
							let sec = Math.floor((t / 1000) % 60);
							hour = hour < 10 ? "0" + hour : hour;
							min = min < 10 ? "0" + min : min;
							sec = sec < 10 ? "0" + sec : sec;
							let format = '';
							if (day > 0) {
								format = `${day}天${hour}小时${min}分${sec}秒`;
							}
							if (day <= 0 && hour > 0) {
								format = `${hour}小时${min}分${sec}秒`;
							}
							if (day <= 0 && hour <= 0) {
								format = `${min}分${sec}秒`;
							}
							self.content = format;
						} else {
							clearInterval(timer);
							self.content = self.endText;
						}
					}, 1000);
				
			},
			getQrcode() {
				var that = this
				this.request.httpTokenRequest({
					url: "order/getOrderQr",
					method: "get"
				}, {
					order_id: this.order_id
				}).then(function(data) {
					if (data.code == 0) {
						that.qrcode = data.data.qr
					} else {}
				})
			},
			cancalOrder() {
				var that = this
				this.request.httpTokenRequest({
					url: "order/closeTicketOrder",
					method: "get"
				}, {
					order_id: this.order_id
				}).then(function(data) {
					if (data.code == 0) {
						that.$util.msg(data.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					} else {
						that.$util.msg(data.msg)
					}
				})
			},
			payment() {
				uni.navigateTo({
					url: "/otherpages/pay/pay?order_id=" + this.orderInfo.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx 150rpx 30rpx;
	}
	.box {
		padding: 30rpx;
		margin-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
	.location {
		width: 153rpx;
		height: 64rpx;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 32rpx;
		opacity: 0.71;
		backdrop-filter: blur(10px);
		line-height: 64rpx;
		display: flex;
		align-items: center;
		padding: 0 27rpx;
		box-sizing: border-box;
	
		image {
			width: 26rpx;
			height: 26rpx;
			margin-left: 13rpx;
		}
	
		view {
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #000000;
		}
	}

	.status {
		.title {
			font-size: 30rpx;
			font-weight: 600;
			color: #CB2C25;
			line-height: 42rpx;
		}
		.time {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 12rpx;
			view {
				font-size: 26rpx;
				color: #1C1D1E;
				line-height: 37rpx;
			}
			.time-style {
				font-size: 26rpx;
				font-weight: 600;
				color: #CB2C25;
				line-height: 37rpx;
			}
		}
	}

	.prudect {
		.hotel_name {
			font-size: 30rpx;
			color: #08090A;
			line-height: 42rpx;
			margin-bottom: 29rpx;
		}
		.prudect_detail {
			display: flex;
			align-items: flex-end;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #E9E9E9;
			.shop {
				display: flex;
				flex: 1;
				image {
					width: 142rpx;
					height: 190rpx;
					margin-right: 23rpx;
				}
			
				.detail {
					flex: 1;
			
					.title {
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
					}
			
					.text {
						display: flex;
						margin-bottom: 10rpx;
						font-size: 24rpx;
						color: #656667;
						line-height: 33rpx;
						text {
							width: 110rpx;
							text-align: right;
							margin-right: 30rpx;
						}
						view {
							flex: 1;
						}
					}
				}
			}
			.num {
				font-size: 24rpx;
				color: #656667;
				line-height: 33rpx;
			}
		}
		.price {
			font-size: 24rpx;
			color: #333333;
			line-height: 33rpx;
			text-align: right;
			padding-top: 35rpx;
			text {
				font-size: 30rpx;
				color: #EF5233;
				line-height: 33rpx;
			}
		}
	}

	.editor {
		.title {
			font-size: 30rpx;
			color: #0F0807;
			line-height: 42rpx;
			margin-bottom: 33rpx;
		}
		text {
			font-size: 26rpx;
			color: #656667;
			line-height: 37rpx;
		}
	}

	.order_sn {
		.text {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 28rpx;
			text {
				font-size: 30rpx;
				color: #0F0807;
				line-height: 42rpx;
			}
			view {
				font-size: 30rpx;
				color: #0F0807;
				line-height: 42rpx;
			}
		}
	}
	.swiper-content{
		height: 569rpx;
		position: relative;
		
	}
	.fixed-nums{
		position: absolute;
		bottom: 24rpx;
		right: 24rpx;
		font-size: 24rpx;
		background-color: rgba(0, 0, 0, 0.7);
		border-radius: 500px;
		height: 34rpx;
		line-height: 34rpx;
		padding: 0 20rpx;
		color: #fff;
	}
	.code {
		display: flex;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
		background: url(https://qiniu-cdn.maeiyun.com/imgs/order/service_code.png) 0 0 no-repeat;
		background-size: 100%;
		height: 569rpx;
		width: 680rpx;
		margin: 0 auto;
		view {
			font-size: 34rpx;
			font-weight: 600;
			color: #691100;
			line-height: 40rpx;
		}
		image {
			width: 252rpx;
			height: 252rpx;
			margin: 100rpx 0 31rpx;
		}
		text {
			font-size: 24rpx;
			color: #A9A9A9;
			line-height: 40rpx;
		}
		
	}
	.errorCode{
		filter: grayscale(100%);        
		-webkit-filter: grayscale(100%);
	}
	.block {
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	
	.btn {
		width: 100vw;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		.btn_box {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			view {
				width: 219rpx;
				height: 88rpx;
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 34rpx;
				margin: 0 15rpx;
			}
			.btn_orange {
				color: #FFFFFF;
				background: #EF5233;
				border: 1rpx solid #EF5233;
			}
			.btn_black {
				border: 1rpx solid #C6C6C6;
				color: #A8A8A8;
			}
			.btn_yellow {
				border: 1rpx solid #FFA126;
				color: #FFA126;
			}
		}
	}

</style>
